<template>
  <div class="page-common-layout custom-tablePage-container">
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :key="screenkey"
            :map="selectMap"
            v-model="defaultTime"
            @conditionChange="selectGroupChange($event)"
          >
          </AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button class="cu-btn-primary" icon="search" @click="search()">
            查询
          </a-button>
          <a-button class="cu-btn-filter" icon="reload" @click="reset()">
            重置
          </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="table-body-container">
      <div class="table-main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="proName" title="项目名称" min-width="200">
          </vxe-column>
          <vxe-column field="equName" title="设备名称"> </vxe-column>
          <vxe-column field="colTime" title="采集时间"> </vxe-column>
          <vxe-column field="pm25" title="PM2.5">
            <template #default="{ row }">
              <span :class="checkClass(row.pm25, configData.pm25)">
                {{ row.pm25 }}
              </span>
            </template>
          </vxe-column>
          <vxe-column field="pm10" title="PM10">
            <template #default="{ row }">
              <span :class="checkClass(row.pm10, configData.pm10)">
                {{ row.pm10 }}
              </span>
            </template>
          </vxe-column>
          <vxe-column field="zs" title="噪声">
            <template #default="{ row }">
              <span :class="substringDate(row)">
                {{ row.zs }}
              </span>
            </template>
          </vxe-column>
          <vxe-column field="tmp" title="温度">
            <template #default="{ row }">
              <span :class="checkClass(row.tmp, configData.tmp)">
                {{ row.tmp }}
              </span>
            </template>
          </vxe-column>
          <vxe-column field="rh" title="湿度">
            <template #default="{ row }">
              <span :class="checkClass(row.rh, configData.rh)">
                {{ row.rh }}
              </span>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="table-pager">
        <vxe-pager
          size="small"
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
          :page-sizes="[20, 50, 100, 500]"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              共<span>{{ pager.total }}</span
              >条
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </div>
</template>

<script>
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
import AssociativeSelectGroup from "@/components/extendCustom/AssociativeSelectGroup";
import {
  pageEnvironmentManage,
  environmentConfig,
} from "@/api/constructManage.js";
export default {
  components: {
    ScreenConditions,
    AssociativeSelectGroup,
  },
  data() {
    return {
      screenkey: "screen",
      selectMap: [
        //项目
        {
          type: "proCode",
          mode: "default",
          placeholder: "请选择项目",
          isDefault: false,
          allowClear: false,
        },
        //时间
        {
          type: "calendar",
        },
      ],
      conditionsData: {},
      defaultTime: [],
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      configData: {},
    };
  },
  mounted() {},
  methods: {
    search() {
      this.pager.page = 1;
      this.getConfigData();
    },

    reset() {
      this.defaultTime = [];
      this.pager.page = 1;
      this.screenkey = Date.now();
    },

    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.getConfigData();
    },

    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },

    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { proCode = "" } = this.conditionsData;
      pageEnvironmentManage({
        page,
        pageSize,
        proCode,
        startTime: this.defaultTime?.[0] ?? "",
        endTime: this.defaultTime?.[1] ?? "",
      })
        .then((res) => {
          this.tableData = res?.rows || [];
          this.pager.total = res?.totalCount || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    getConfigData() {
      environmentConfig({})
        .then((res) => {
          let { data } = res;
          this.configData = JSON.parse(data?.jsonData ?? "{}");
        })
        .catch((_) => {
          this.configData = {};
        })
        .finally((_) => {
          this.getTableData();
        });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    substringDate(row) {
      let { configData } = this;
      if (!row.colTime) {
        return;
      }
      const subStr = row.colTime.substring(11, 13);
      let str = "";
      if (subStr > 6 && subStr < 18) {
        str = "dayzs";
      } else {
        str = "nightzs";
      }
      if (!configData[str]) {
        return;
      }
      if (row.zs > configData[str]) {
        return "error";
      } else {
        return "success";
      }
    },

    checkClass(num_1, num_2) {
      if (!num_2) {
        return;
      }
      if (num_1 > num_2) {
        return "error";
      } else {
        return "success";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.table-main {
  .success {
    color: #239b53;
  }
  .error {
    color: #ff2d2d;
  }
  .default {
    color: #1677ff;
  }
}
</style>
